<template>
    <div id="amap">
        <div id="analymap" class="analymap" ></div>
        <div class="traffic-enter">
            <div v-show="showTabFlagO" id="payment">
                <p>常发拥堵路段排名
                    开始： <input placeholder="请输入日期" id="analyStartTime"  class="laydate-icon" onclick="laydate({istime: false,isclear:false,issure:false,istoday:false, format: 'YYYYMMDD',min:laydate.initTime(),max:laydate.now(0, 'YYYY-MM-DD')})">
                    结束： <input placeholder="请输入日期" id="analyEndTime"  class="laydate-icon" onclick="laydate({istime: false,isclear:false,issure:false,istoday:false, format: 'YYYYMMDD',min:laydate.initTime(),max:laydate.now(0, 'YYYY-MM-DD'),start: laydate.now(0, 'YYYY-MM-DD')})">
                <a href="#" class="a_class_icon" @click="initChartBar()"><span class="search_icon_analy" ></span></a>
                </p>
                <div id="main" style="width: 600px;height:300px;"></div>
            </div>
            <div v-show="showTabFlagO" class="analy-lebu">
                <div class="analy-t">
                    <lable>拥堵瓶颈路段统计</lable>
                    <select id="sbtime" @click="initCountBar()">
                        <option value="10">连续拥堵10分钟</option>
                        <option value="20">连续拥堵20分钟</option>
                        <option value="30">连续拥堵30分钟</option>
                    </select>
                   <!-- <a>事故关联统计</a>-->
                </div>
                <div id="listBar">
                    <ol class="analy-list">
                        <li v-for="item in listData" @click="initPoiIcon(item)">
                            <span class="ana-icon"></span>
                            {{item.roadName +'('+ item.roadStart +'-'+ item.roadEnd+')'}}
                            <span class="list-count">拥堵次数：{{item.counts}}</span>
                            <span id="iconc">
                            <a href="#"  @click="showLineBar(item.roadId)" class="bar-icon"></a>
                        </li>
                    </ol>

                </div>
                <div class="anaTab" v-show="showLineFlag">
                    <span @click="hidetTab()" class="hide_tab"></span>
                    <!--<h5>常发拥堵瓶颈时间分析</h5>-->
                    <div id="pointAnaly"  style="width:300px;height:225px;margin-top:10px;"></div>
                </div>


            </div>
        </div>

        <div id="tabO" class="hide_Analy_Tab_o" v-show="showTabFlagO"  @click="hideAnalyMapO()"></div>
        <div id="tabT" class="show_Analy_Tab_o" v-show="showTabFlagT" @click="showAnalyMapO()"></div>
        <div class="cennavi" style='position:absolute;z-index:52;left:15px;bottom: 5px;'>
            <img style="widht:30px;height:25px;" src="static/img/pic-logo-cennavi.png">
        </div>
    </div>

</template>
<script>

    var data = [
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'90','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'85','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'80','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'75','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'70','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'65','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'60','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'55','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'40','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'35','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'22','roadName':'民族东路（少先路-友谊大街）'},
        {'roadId':'1502000ti3yu4chang3nan2lu4xi1he2lu4xi1si4jie160x7','counts':'10','roadName':'民族东路（少先路-友谊大街）'}

    ]

    var tData = [
            {"00":0},{"01":0},{"02":0},{"03":0},{"04":0},{"05":0},{"06":0},{"07":0},{"08":0},{"09":0},{"10":2},{"11":2},
            {"12":2},{"13":0},{"14":3},{"15":2},{"16":5},{"17":3},{"18":4},{"19":4},{"20":2},{"21":2},{"22":1},{"23":0}
        ]
    var echarts = require('echarts');


    import * as globals from '../global'
    import env from '../global/env'
    /*   import EnterTraffic from './EnterTra/!**!/ffic'*/
    import * as configs from '../config'
    import {mapGetters} from 'vuex'


    export default{
        name: 'AnalyMap',
        data(){
            return {
                rlatlon:'',
                showLineFlag:false,
                listData:[],
                dates:'',
                datee:'',
                showTabFlagO:true,
                showTabFlagT:false
            }

        },
        components:{
            /*EnterTraffic*/
        },
        methods: {
            resizeMap(topnav){
                setTimeout(() => {
                    if(topnav){
                        $('.analymap').css('top','0px');
                        $('.traffic-enter').css('top','18px');

                    }
                    env.mapCn.resize();

                },50)

            },
            hideAnalyMapO(){
                this.showTabFlagO=false;
                this.showTabFlagT=true;
                this.showLineFlag = false
            },
            showAnalyMapO(){
                    this.showTabFlagO=true;
                    this.showTabFlagT=false;
            },
            initChartBar(){


                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                /*测试*/

                var analyStartTime = '';
                var analyEndTime = '';

                if(globals.DATE_ANALY_INIT_TIME == 'A'){
                    analyStartTime = '20170301';
                    analyEndTime = '20170331';
                    document.getElementById('analyStartTime').value = analyStartTime;
                    document.getElementById('analyEndTime').value = analyEndTime;
                }else if(globals.DATE_ANALY_INIT_TIME == 'B'){
                    analyStartTime = document.getElementById('analyStartTime').value
                    analyEndTime = document.getElementById('analyEndTime').value
                    if(analyStartTime == "" && analyEndTime == ""){
                        analyStartTime = document.getElementById('analyStartTime').value =  this.getNowFormatDate(new Date(),'1');
                        analyEndTime = document.getElementById('analyEndTime').value  = this.getNowFormatDate(new Date);
                    }else if(analyStartTime == "" && analyEndTime != ""){
                        analyStartTime = document.getElementById('analyStartTime').value  = this.getNowFormatDate(new Date(),'1');
                    }else if(analyStartTime != "" && analyEndTime == ""){
                        analyEndTime = document.getElementById('analyEndTime').value = this.getNowFormatDate(new Date);
                    }
                }
                $.get(globals.URL_BAOTOU_ANALY_ROADBANK+'?startDate='+analyStartTime+'&endDate='+analyEndTime).done(function (data) {
                    var xValue = new Array();
                    var yValue = new Array();
                    data = jQuery.parseJSON(data);
                    if(data.length>10){
                        for(var i=10;i>0;i--){
                            var dataArr = data[i];
                            xValue.push(dataArr.roadName+'('+dataArr.roadStart+'-'+dataArr.roadEnd+')');
                            yValue.push(dataArr.counts);
                        }
                    }else{
                        for(var i=0;i<data.length;i++){
                            var dataAre = data[i];
                            xValue.push(dataAre.roadName+'('+dataAre.roadStart+'-'+dataAre.roadEnd+')');
                            yValue.push(dataAre.counts);
                        }
                    }
                    // 绘制图表
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid:{
                            show:true,
                            left: '5px',
                            right:'12px',
                            top:'0px',
                            bottom:'8px',
                            containLabel: true,
                        },
                        barCategoryGap:'8',
                        barWidth:'12',
                        xAxis: {
                            type:'value',
                            axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                        },
                        yAxis: {
                            data: xValue,
                            axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                            /* [{
                             value:'民族东路（少先路-友谊大街）',
                             textStyle: {
                             fontSize: 15,
                             color: 'blue'
                             }

                             },'周二','周三','周四','周五','周六','周日','周三','周四','周五','周六'],*/
                        },
                        series: [{
                            name: '拥堵次数',
                            type: 'bar',
                            itemStyle:{
                                normal:{
                                    color:'#2a9bf0',
                                    barBorderRadius:[0,70,70,0],
                                },
                            },
                            data: yValue,
                        }]
                    });
                });
                this.initCountBar();
            },
            initCountBar(){
          /*      /!*测试*!/
                var bstime = '20170301';
                var betime = '20170332';

               /!* var bstime = document.getElementById('rstime').value;
                var betime = document.getElementById('retime').value;*!/
                var select = document.getElementById("sbtime");*/

                var analyStartTime = document.getElementById('analyStartTime').value;
                var analyEndTime = document.getElementById('analyEndTime').value;

               /* if(globals.DATE_ANALY_INIT_TIME == 'A'){
                    analyStartTime = '20170301';
                    analyEndTime = '20170331';
                    document.getElementById('analyStartTime').value = analyStartTime;
                    document.getElementById('analyEndTime').value = analyEndTime;
                }else if(globals.DATE_ANALY_INIT_TIME == 'B'){
                    analyStartTime = document.getElementById('analyEndTime').value = analyEndTime;
                    analyEndTime = document.getElementById('analyEndTime').value = analyEndTime;
                    if(analyStartTime == "" && analyEndTime == ""){
                        document.getElementById('analyStartTime').value = analyStartTime = this.getNowFormatDate(new Date(),'1');
                        document.getElementById('analyEndTime').value = analyEndTime = this.getNowFormatDate(new Date);
                    }else if(analyStartTime == "" && analyEndTime != ""){
                        document.getElementById('analyStartTime').value = analyStartTime = this.getNowFormatDate(new Date(),'1');
                    }else if(analyStartTime != "" && analyEndTime == ""){
                        document.getElementById('analyEndTime').value = analyEndTime = this.getNowFormatDate(new Date);
                    }
                }*/
                var selectValue = document.getElementById('sbtime').value;


                var olto = $("<ol class='analy-list'></ol>");
                var that = this;
               /* var lito = $('<li><span class="ana-icon"></span>'+(i+1)+'、'+data[i].roadName+'('+data[i].roadStart+'-'+data[i].roadEnd+')</li>');*/
                $.get(globals.URL_BAOTOU_ANALY_STATIC+'?startDate='+analyStartTime+'&endDate='+analyEndTime+'&duration='+selectValue).done(function (data) {
                    data = jQuery.parseJSON(data);

                    that.listData = data;

                });

            },
            showLineBar(roadId){
              /*  var offsetHeight = document.body.offsetHeight;  //735
                var anaTab_top =parseInt(-266/735*offsetHeight);
                $('.anaTab').css('margin-top',anaTab_top+'px');*/


                var analyStartTime = document.getElementById('analyStartTime').value;
                var analyEndTime = document.getElementById('analyEndTime').value;
                console.log('进来了'+roadId);
                var keyArr = new Array();
                var value = new Array();
                this.showLineFlag = true;
                $.get(globals.URL_BAOTOU_ANALY_ROADTIME+'?startDate='+analyStartTime+'&endDate='+analyEndTime+'&roadId='+roadId).done(function (data) {
                    data = jQuery.parseJSON(data);
                    for(var a=0;a<data.length;a++){
                        for(var key in data[a]){
                            keyArr.push(key);
                            value.push(data[a][key]);
                        }
                    }

                    var pChart = echarts.init(document.getElementById('pointAnaly'));
                    pChart.setOption({
                        title:{
                            text:'常发拥堵瓶颈时间分析',
                            textStyle:{
                                color:'#ebebef',
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type:'shadow',
                            }
                        },
                        grid:{
                            show:true,
                            left: '0px',
                            right:'0px',
                            top:'50px',
                            bottom:'0px',
                            containLabel: true,


                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: keyArr,
                            axisLabel: {margin: 2, textStyle: {color: '#aaa'}},
                        },
                        yAxis: {
                            boundaryGap: [0, '50%'],
                            type: 'value',
                            axisLabel: {interval: 0, textStyle: {color: '#ddd',fontSize:15}},
                        },
                        series: [
                            {
                                name:'拥堵次数',
                                type:'line',
                                smooth:true,
                                symbol: 'none',
                                stack: 'a',
                                itemStyle:{
                                    normal:{
                                        color:'#2a9bf0',

                                    },
                                },
                                areaStyle: {
                                    normal: {}
                                },
                                data: value
                            }
                        ]

                    })

                });


            },
            initPoiIcon(item){

                if(env.mapCn.getSource('analyLineSource')){
                    env.mapCn.removeSource("analyLineSource");
                    env.mapCn.removeLayer('analyLine');
                }
                env.mapCn.addSource("analyLineSource", {
                    "type": "geojson",
                    "data": {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "LineString",
                            "coordinates": item.geometry.coordinates
                        }
                    }
                });
                env.mapCn.addLayer({
                    "id": "analyLine",
                    "type": "line",
                    "source": "analyLineSource",
                    "layout": {
                        "line-join": "round",
                        "line-cap": "round"
                    },
                    "paint": {
                        "line-color": "#ff0000",
                        "line-width": 2
                    }
                });
                env.mapCn.setZoom(13);
                env.mapCn.flyTo({
                    center: item.geometry.coordinates[0]
                });


            },
            hidetTab(){
                console.log('关闭');
                this.showLineFlag = false;
            },
            getNowFormatDate(date,flag) {
                if(flag == '1'){  /*获取当月第一天*/
                    date.setDate(1);
                }
                /*DATE转成字符串*/
                var seperator1 = "-";
                var seperator2 = ":";
                var seperator3 = "/";
                var month = date.getMonth() + 1;
                var minutes = date.getMinutes();
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
          /*      if(minutes >= 0 && minutes <= 9){
                    minutes = "0" + minutes;
                }*/
                var currentdate;
                currentdate =date.getFullYear() +  month +  strDate;
                /*currentdate =date.getFullYear() + seperator1 + month + seperator1 + strDate
                        + " " + date.getHours() + seperator2 + minutes;*/
//    var currentdate =date.getFullYear() + seperator1 + month + seperator1 + strDate
//            + " " + date.getHours() + seperator2 + minutes;
                return currentdate;


            },
            initMap(){
                minemap.accessToken = globals.MAP_ACCESS_TOKEN;
                minemap.solution = globals.MAP_SOLUTION;
                minemap.spriteUrl = globals.SPRITE_LOC
                minemap.fontsUrl = 'http://15.32.12.64/minemapapi/v1.2/fonts';
                minemap.domainUrl = 'http://15.32.12.64/minemap-server';
                var ymap = new minemap.Map({
                    container: 'analymap',
                    style: globals.URL_SERVICE_ROOT + globals.URL_STYLE_RES_ROOT + this.styleId,
                    center: [109.899842, 40.635018],
                    zoom: 11,
                    pitch: 0,
                    maxZoom: 17,
                    dragRotate: false
                });
                /*var xdata = new Array();
                 var xCounts = new Array();
                 for(var i=data.length-1;i>0;i--){
                 xdata.push(data[i].roadName);
                 xCounts.push(data[i].counts);
                 }*/
                env.mapCn = ymap;
                env.mapCn.addControl(new minemap.Navigation(),"bottom-right");
                console.log('过来了');
                this.initChartBar();
                this.initCountBar();
            }




        },

        mounted(){




        },
        computed: {
            ...mapGetters({
                mapType: 'mapType',
                mapbodyfullstatus: 'mapbodyfullstatus',
            }),
            nav_hiddenorneot_img(){
                return this.mapbodyfullstatus ? 'static/img/mapfull.png' : 'static/img/mapnotfull.png'
            },
            ctrlBtnSrc(){
                return this.ctrl_btn_2d_status ? 'static/img/map/2d.png' : 'static/img/map/3d.png';
            },
            trafficBtnSrc(){
                return this.traffic_status ? 'static/img/map/traffic_on.png' : 'static/img/map/traffic_off.png'
            },
            styleId(){
                if (this.mapType === globals.MAP_TYPE_DARK) {
                    return configs.styleIdDark;

                } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
                    return configs.styleIdLight;
                }
                console.log("++++++++++++++++++++++++++"+this.mapType);
            },
            layerBefore(){
                if (this.mapType === globals.MAP_TYPE_DARK) {
                    return configs.layerBeforeDark;
                } else if (this.mapType === globals.MAP_TYPE_LIGHT) {
                    return configs.layerBeforeLight;
                }
            },
            darkClass (){
                return {
                    'flex-item': true,
                    'flex-select': this.mapType === globals.MAP_TYPE_DARK
                }
            },
            lightClass (){
                return {
                    'flex-item': true,
                    'flex-select': this.mapType === globals.MAP_TYPE_LIGHT
                }
            }
        },
        destroyed () {
            clearInterval(this.interval);
        }

    }

</script>
<style scope>
    .analymap {
        z-index: 44;
        background-color: #f3f3f3;
        position: fixed;
        /* width:100%;
         height:100%;*/
        left: 0;
        right: 0;
        top: 67px;
        bottom: 0;

        /*text-align: center;*/
    }

    #amap {
        position:fixed;
        width:100%;
        height:92.4%;
        z-index:59;
    }
    .traffic-enter{
        /*width:280px;*/
        position:fixed;

        z-index:53;
        /*reight:20px;*/
        left:20px;
        top:85px;
    }
    .anaTab{
        /*width:280px;*/
        position:fixed;

        z-index:51;
        /*reight:20px;*/
        background: #01174d;
        left:648px;
        height:317px;

    }
    .hide_tab{
        position: absolute; height:21px;width:30px;display: block;margin-left: 286px;margin-top: 1px;z-index:88;
        background: url(../../static/img/analyIcon/icon-close-window.png) no-repeat;

    }
    .hide_Analy_Tab_o{
        position: absolute; height:200px;width:18px;display: block;margin-left: 645px;margin-top: 74px;z-index:50;
        background: url(../../static/img/analyIcon/icon-rightside-pack-up-dark.png) no-repeat;
    }
    .show_Analy_Tab_o{
        position: absolute; height:200px;width:18px;display: block;margin-left: 0px;margin-top: 74px;z-index:50;
        background: url(../../static/img/analyIcon/icon-rightside-expand-dark.png) no-repeat;
    }
    .hide_Analy_Tab_t{
        position: absolute; height:200px;width:18px;display: block;margin-left: 645px;margin-top: 413px;z-index:50;
        background: url(../../static/img/analyIcon/icon-rightside-pack-up-dark.png) no-repeat;
    }
    .show_Analy_Tab_t{
        position: absolute; height:200px;width:18px;display: block;margin-left: 645px;margin-top: 74px;z-index:50;
        background: url(../../static/img/analyIcon/icon-rightside-pack-up-dark.png) no-repeat;
    }

    #payment{
        list-style-type:none;
        background: #01174d;
      /*  background: rgba(255, 255, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        color:#fcfcfd;
        height:350px;
        font-size: 20px;
        padding-left: 15px;
        line-height: 42px;
    }

    .anaTab{
        background: #01174d;
        /*  background: rgba(255, 255, 255, .3);*/
        padding: 5px 10px;

        color:#fcfcfd;
        height: 253px;
        margin-top:-266px;

    }

    #payment input:not([type=radio]), #payment textarea {
        background: #ffffff;
        border: #FC3 solid 1px;
        -webkit-border-radius: 3px;
        outline: none;
        padding: 5px;
        width: 123px;
        font-color:#c7cad2;
    }
    .analy-lebu{
        list-style-type:none;
        background: #01174d;
        /*  background: rgba(255, 255, 255, .3);*/
        line-height: 15px;
        padding: 5px 10px;
        margin-bottom: 2px;
        margin-top:12px;
        color:#fcfcfd;
        height:420px;
    }



    .analy-lebu ol li{position: relative;font-size: 14px;height:30px; line-height:30px; display:block;}
    .analy-lebu h4{height: 42px; line-height: 42px;background-color: #01174d;padding-left: 15px; font-size:20px;}

    .analy-lebu ol li:hover{background-color: #112b76;cursor: pointer;}

    .analy-t{background-color: #01174d;}
    .analy-t lable{height: 42px; line-height: 42px;padding-left: 15px; font-size:20px;}
    .analy-t select{height: 21px;margin-left: 100px;  background-color: #003399;}
    .analy-t a{font-size:18px; margin-left:77px;}



    .analy-list{height:350px;width:574px;overflow:auto;}

    .ana-icon{position: absolute; height:19px;width:13px;display: block;margin-left: -30px;margin-top: 4px;
            background: url(../../static/img/analyIcon/icon-location-blue.png) no-repeat;
    }
    .list-count{
        position: absolute; height:21px;width:120px;display: block;margin-left: 306px;margin-top: -30px;
    }
    .bar-icon{
        position: absolute; height:21px;width:30px;display: block;margin-left: 461px;margin-top: -21px;
        background: url(../../static/img/analyIcon/left-arrow.png) no-repeat;
    }
    .date_picker_o{
        margin-left:200px;
        margin-top:-33px;
        position: absolute;
    }
    .date_picker_t{
        margin-left:410px;
        margin-top:-33px;
        float:left;
        position: absolute;


    }
    .search_icon_analy{
        position: absolute; height:30px;width:30px;display: block;margin-left: 561px;margin-top: -31px;
        background: url(../../static/img/analyIcon/icon-calendar-search.png) no-repeat;

    }
    .search_icon_analy:hover{background-color: #007aff;cursor: pointer;height:35px;width:35px;-webkit-border-radius: 10px;  }
    .marker_analy {
        background-image: url('../../static/img/analyIcon/icon-electronic eye.png');
        background-size: cover;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
    }


</style>